

/*

    1)
    // 使用组件
    <custom-input v-model="searchText"></custom-input>
        等价于
            <custom-input
              v-bind:value="searchText"   // 绑定value属性值
              v-on:input="searchText = $event" // 定义input事件监听器，$event子组件抛出来的值
            ></custom-input>

        // 子组件的定义
        Vue.component('custom-input', {
          props: ['value'],  // 1. 指定子组件接收的prop列表
          template: `
            <input
              v-bind:value="value"
              v-on:input="$emit('input', $event.target.value)" // 触发父组件定义的input监听器，并抛出值。
                                                                  $event表示当前触发的事件对象，$event.target表示事件触发的目标（触发事件的DOM元素）
            >
          `
        })





    2)
    一个组件上的v-model默认会利用value属性和input事件，像单选框、复选框等类型的输入控件可能会将value用作不同的目的，
    model选项可以用来避免这样的冲突

*/


Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

// 使用组件
// <base-checkbox v-model="lovingVue"></base-checkbox> 等价于 <base-checkbox v-bind:checked="lovingVue" v-on:change="lovingVue = $event"></base-checkbox> 此处的$event是抛出来的值
